<template>
	<view class="root">
		<ul v-if="list.length > 0">
			<li class="record-li margin-bottom_10" v-for="item in list" :key="index">
				<view class="flex justify-between ">
					<view>申请成为分销员</view>
					<!-- {-1:驳回,0:待审核,1:已审核,2:无需审核} -->
					<view class="darkColor">
						<text v-if="item.status == '-1'">驳回</text>
						<text v-if="item.status == '0'">待审核</text>
						<text v-if="item.status == '1'">已审核</text>
						<!-- <text>无需审核</text> -->
					</view>
				</view>
				<view class="color-999 content" v-if="item.back_reason">{{ item.back_reason }}</view>
				<view class="color-999" style="margin-top: 15rpx;">{{ item.add_time | formatDate }}</view>
			</li>
		</ul>

		<view class="loading">
			<block v-if="isLoading">
				<image src="https://mall.xzthealth.com/loading2.gif"></image>
				<text>加载中</text>
			</block>
		</view>
		<without v-if="!isLoading" :showImg="len" :tip="tip"></without>
	</view>
</template>

<script>
import without from '@/components/without.vue';
let App = getApp().globalData;
export default {
	name: 'record', //申请记录
	components: {
		without
	},
	data() {
		return {
			list: [],
			count: '', //总页数
			page: 1, // 当前页
			limit: 10,
			tip: '暂无数据',
			isLoading: false
		};
	},
	computed: {
		len() {
			if (this.list.length > 0) {
				return false;
			} else {
				return true;
			}
		}
	},
	mounted() {
		this.getUserApplyRecord();
	},
	filters: {
		formatDate: function(timestamp) {
			if (!timestamp) return;
			let date = new Date(timestamp * 1000);
			let dateInfo = {
				Y: date.getFullYear(),
				M: date.getMonth() + 1,
				D: date.getDate(),
				h: date.getHours(),
				m: date.getMinutes(),
				s: date.getSeconds()
			};
			let formatNumber = n => (n >= 10 ? n : '0' + n);
			let res = 'Y-M-D h:m:s'
				.replace('Y', dateInfo.Y)
				.replace('M', dateInfo.M)
				.replace('D', dateInfo.D)
				.replace('h', formatNumber(dateInfo.h))
				.replace('m', formatNumber(dateInfo.m))
				.replace('s', formatNumber(dateInfo.s));
			return res;
		}
	},
	methods: {
		getUserApplyRecord() {
			let obj = {
				page: this.page,
				limit: this.limit
			};
			let _self = this;
			this.$request('Distribution/MiniApply/getUserApplyRecord', obj)
				.then(res => {
					console.log(res);
					if (res.status === 1) {
						_self.count = res.data.count;
						_self.list = _self.list.concat(res.data.list);

						_self.isLoading = false;
						_self.isIcon = false;
						_self.tip = '我是有底线的';
						if (_self.count == _self.list.length) {
							_self.tip = '已加载全部';
						}
					} else {
						_self.list = [];
						_self.isIcon = true;
						_self.tip = '暂无数据';
						_self.isLoading = false;
						App.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
				.catch(e => {});
		}
	},

	onReachBottom() {
		let _self = this;
		if (_self.count > _self.list.length) {
			_self.tip = '';
			_self.isLoading = true;
			this.page += 1;
			this.getUserApplyRecord();
		} else {
			_self.tip = '已加载全部';
			_self.isLoading = false;
		}
	}
};
</script>

<style lang="less">
@import '@/common/index.less';
page {
	.bg;
}
.root {
	box-sizing: border-box;
	padding: 20rpx 25rpx;
}
.record-li {
	border-radius: 8px;
	padding: 20rpx;
	background-color: #fff;
}
.content {
	margin-top: 25rpx;
	padding-bottom: 10rpx;
	border-bottom: 1px solid #eee;
}
.color-999 {
	color: #999;
}
</style>
